<template>
    <div>
        <Table border :columns="columns" :data="tableData"></Table>
        <!--确认复核弹窗-->
        <modal v-model="dialogAdd" width="420px">
            <div class="modal_content">
                <h2>已确认付款</h2>
            </div>
            <div slot="footer" style="text-align: center">
                <Button type="ghost" @click="close">关闭</Button>
            </div>
        </modal>
        <modal v-model="showDataModal" width="600px">
            <p slot="header" style="color:#f60;">
                <span>详情展示</span>
            </p>
            <div class="modal_content_img">
                <img v-for="item in vouchers" :key="item.id" :src="item.path" height="200" width="570">
            </div>
            <div slot="footer">
                <Button  @click="closeDataInfos()" size="large">关闭</Button>
            </div>
        </modal>
    </div>
</template>

<script>
    import ajax from '../../../../libs/axios.js'
    export default {
        props: {
            tableData: Array,
            access: Object
        },
        data () {
            return {
                dialogAdd:false,   // 确认复核弹窗
                showDataModal:false,//付款详情展示
                vouchers:[],//支付凭证集合
                orderId:'',
                itemTotal: 0,      // 条数
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '用户名称',
                        align: 'center',
                        width: 100,
                        key: 'user_name'
                    },
                    {
                        title: '联系方式',
                        align: 'center',
                        width: 140,
                        key: 'user_mobile'
                    },
                    {
                        title: '身份证号',
                        align: 'center',
                        width: 260,
                        key: 'card_num'
                    },
                    {
                        title: '企业类型',
                        align: 'center',
                        width: 100,
                        key: 'partyType',
                        render: (h, params) => {
                            if (params.row.partyType === 1) {
                                return h('span', '2P')
                            }  else if(params.row.partyType === 2) {
                                return h('span', '4S')
                            } else if(params.row.partyType === 3) {
                                return h('span', '质押监管员')
                            }else if(params.row.partyType === 4) {
                                return h('span', '2B')
                            }else if(params.row.partyType === 5) {
                                return h('span', '小b')
                            }else if(params.row.partyType === 6) {
                                return h('span', '个人')
                            }else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '企业名称',
                        align: 'center',
                        width: 300,
                        key: 'party_name'
                    },
                    {
                        title: '订单编号',
                        align: 'center',
                        width: 260,
                        key: 'order_no'
                    },
                    {
                        title: '交易订单编号',
                        align: 'center',
                        width: 260,
                        key: 'pay_no'
                    },
                    {
                        title: '支付类型',
                        align: 'center',
                        width: 100,
                        key: 'pay_type',
                        render: (h, params) => {
                            if (params.row.pay_type === 1) {
                                return h('span', '支付宝')
                            }  else if(params.row.pay_type === 2) {
                                return h('span', '微信')
                            } else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '支付用途',
                        align: 'center',
                        width: 100,
                        key: 'use_way',
                        render: (h, params) => {
                            if (params.row.use_way === 1) {
                                return h('span', '定金')
                            }  else if(params.row.use_way === 2) {
                                return h('span', '尾款')
                            } else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '支付状态',
                        align: 'center',
                        width: 100,
                        key: 'status',
                        render: (h, params) => {
                            if (params.row.status === 0) {
                                return h('span', '未支付')
                            }  else if(params.row.status === 1) {
                                return h('span', '支付成功')
                            } else if(params.row.status === 2) {
                                return h('span', '支付失败')
                            } else if(params.row.status === 3) {
                                return h('span', '退款中')
                            } else if(params.row.status === 4) {
                                return h('span', '已退款')
                            } else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '财务状态',
                        align: 'center',
                        width: 100,
                        key: 'financial_status',
                        render: (h, params) => {
                            if (params.row.financial_status === 1) {
                                return h('span', '已上传')
                            }  else if(params.row.financial_status === 2) {
                                return h('span', '已确认')
                            } else if(params.row.financial_status === 3) {
                                return h('span', '交易复核')
                            } else if(params.row.financial_status === 4) {
                                return h('span', '交易确认')
                            } else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '价格',
                        align: 'center',
                        width: 100,
                        key: 'price'
                    },
                    {
                        title: '支付时间',
                        align: 'center',
                        width: 100,
                        key: 'crt_time'
                    },
                    {
                        title: '经销商',
                        align: 'center',
                        width: 100,
                        key: 'account_name'
                    },
                    {
                        title: '银行名称',
                        align: 'center',
                        width: 100,
                        key: 'bank_name'
                    },
                    {
                        title: '银行账号',
                        align: 'center',
                        width: 100,
                        key: 'bank_number'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 245,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight:'5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.finishorder(params.row.order_id)
                                            }
                                        }
                                    },
                                    '车辆详情'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight:'5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.cofimreview(params.row.id)
                                            }
                                        }
                                    },
                                    '付款确认'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight:'5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.showData(params.row.id,params.row.order_id)
                                            }
                                        }
                                    },
                                    '付款详情'
                                ),
                            ])
                        }
                    }
                ],
            }
        },
        created () {
            this.init()
        },
        activated () {
            this.init()
        },
        methods: {
            init () {},
            showData(id,orderId){
                this.id = id
                this.orderId = orderId
                this.showDataModal=true;
                this.showDataInfos(orderId)
            },
            //获取图片的信息
            showDataInfos(orderId){
                let that = this
                let url = 'adminlogin/v2/carorder/payVoucherList';
                let data = {
                  orderId:orderId
                }
                ajax.formRes(url, data).then(res => {
                    if (res.code == 200){
                        this.vouchers=res.data;
                    }else{
                        this.$Message.error('确认收款失败，请重试');
                    }
                }).catch(err => {
                    console.log('有错误信息')
                    console.log(err)
                })
            },
            closeDataInfos(){
                this.showDataModal=false;
                //this.$emit('sureHandler',1);
            },
            // 进入付款交易确认详情页面
            finishorder(id){
                let argu = {
                    id: id
                }
                this.$router.push({
                    name: 'transaction_confirm_detail',
                    params: argu
                })
            },
            // 确认付款按钮
            cofimreview(id){
                let url = 'adminlogin/financial/transactionConfirm';
                 let data = {
                   id:id,
                   financialStatus:4
                 }
                 ajax.formRes(url, data).then(res => {
                     if (res.code == 200){
                         this.dialogAdd=true;

                     }else{
                         this.$Message.error('确认付款失败，请重试');
                     }
                 }).catch(err => {
                     console.log('有错误信息')
                     console.log(err)
                 })
            },
            // 确认收款弹窗关闭按钮
            close(){
                this.dialogAdd=false;
                this.$emit('sureHandler',1);
            }
        },
    }
</script>

<style lang="less">
    @import "../less/editable-table.less";
</style>

<style>
    .cofirm{
        width:80px;
        margin-left: 10px
    }
    .modal_content{
        height: 50px;
        line-height:50px;
        text-align: center;
    }
    .modal_content_img{
        text-align: center;
    }
</style>


